import React, {  useEffect, useRef, useState } from "react";
import { cloudSearch } from "@/api/search";
import { Input, Select, Space, Table, Image, Button } from "antd";
import { fallback } from'@/views/search/fallbackImg'
import { useNavigate } from "react-router-dom";
import { getSearchDefault } from "../../api/search";
const { Search } = Input;

export default function SearchDetails() {

  const [category, setCategory] = useState('1');
  const [dataSource, setDataSource] = useState([]);
  const searchDefault=useRef()
  const navigate = useNavigate();
  const options = [
    {
      value: "1",
      label: "单曲",
      key: '1',
    },
    {
      value: "10",
      label: "专辑",
      key: '2',
    },
    {
      value: "100",
      label: "歌手",
      key: '3',
    },
    {
      value: "1000",
      label: "歌单",
      key: '4',
    },

  ];
  const handleSelected = (value) => {
    setCategory(value);
  };
  const handleSearch = (searchVal) => {
    searchVal && cloudSearch({ type: category, keywords: searchVal }).then((res) => {
    //   switch (category) {
    //     case "1":
    //       setDataSource(res.data.result.songs);
    //       break;
    //     case "10":
    //       setDataSource(res.data.result.albums);
    //       break;
    //     case "100":
    //       setDataSource(res.data.result.artists);
    //       break;
    //     case "1000":
    //       setDataSource(res.data.result.playlists);
    //       break;
    //     default:
    //       break;
    //  }
     
    //  使用策略模式优化switch-case
     setDataSource(res?.data?.result?.[routerOptions?.[category]]);
    });
  };

  const obj = {
    1: "picUrl", // 单曲
    10: "picUrl", // 专辑
    100: "picUrl", // 歌手
    1000: "coverImgUrl", // 歌单
  };
  const operate = {
    1: "单曲", // 单曲
    10: "专辑", // 专辑
    100: "歌手", // 歌手
    1000: "歌单", // 歌单
  };
  const routerOptions = {
    1: "songs", // 单曲
    10: "albums", // 专辑
    100: "artists", // 歌手
    1000: "playlists", // 歌单
  };
  const columns = [
    {
      title: `${operate[category]}id号`,
      dataIndex: "id",
      key: "id",
    },
    {
      title: `${operate[category]}名`,
      dataIndex: "name",
      key: "name",
    },

    // FIXME:单曲多一列:作者名称
    // category === "1" && {
    //   title: `${operate[category]}作者名`,
    //   render(_, record) {
    //     return record?.ar.map((item) => {
    //       return <Tag key={ item?.id} color="#108ee9">{item?.name}</Tag>;
    //     });
    //   },
    //   key: "artist",
    //   align: 'center',
    // },
    {
      title: `${operate[category]}封面`,
      render(_, record) {
        return category === "1" ? (
          <Image
            fallback={fallback}
            style={{ height: "80px", objectFit: "contain" }}
            src={record?.al?.[obj?.[category]] ?? fallback}
          />
        ) : (
          <Image
            fallback={fallback}
            style={{ height: "80px", objectFit: "contain" }}
            src={record?.[obj?.[category]] ?? fallback}
          />
        );
      },
      key: "id",
    },
    {
      title: "操作",
      render(_, record) {
        return (
          <Button
            type="primary"
            onClick={() =>
              navigate(`/${routerOptions[category]}/details/${record.id}`)
            }
          >
            {operate[category]}
          </Button>
        );
      },
    },
  ];
  useEffect(() => { 
    getSearchDefault().then(res => { 
      searchDefault.current=res.data.data.realkeyword;
    })
  },[])
  return (
    <div>
      <Space.Compact>
        <Select
          defaultValue="1"
          options={options}
          onSelect={(value) => handleSelected(value)}
        />
        <Search
          placeholder={searchDefault.current}
          allowClear
          onSearch={(value) => handleSearch(value)}
        />
      </Space.Compact>

      <Table
        rowKey={(record) => record.id}
        dataSource={dataSource}
        columns={columns}
        scroll={{
          y: 600,
        }}
      />
    </div>
  );
}
